<template>
  <div class="table">
    <div class="table-head head">
      <div class="head-bottom">
        <OrderSearch @getSearchVal="getSearchVal" @resetSearch="resetSearch"/>
      </div>
    </div>
    <div class="table-content">
      <Table :table-data="tableData" :table-head="infoHead" :table-height-y="100" :total="total" :tr-height="150"
             @dataInit="getUsers">
        <!-- 订单信息       -->
        <el-table-column
            label="订单信息"
            min-width="200">
          <template slot-scope="scope">
            <div class="order">
              <div class="item">
                <span class="label">订单编号 ：</span>
                <span class="main">1545454545</span>
              </div>
              <div class="item">
                <span class="label">订单金额 ：</span>
                <span class="main">0.01</span>
              </div>
              <div class="item">
                <span class="label">实付金额 ：</span>
                <span class="main">0.01</span>
              </div>
              <div class="item">
                <span class="label">购买数量 ：</span>
                <span class="main">1</span>
              </div>
              <div class="item">
                <span class="label">支付方式 ：</span>
                <span class="main">微信</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- 商品信息       -->
        <el-table-column
            label="商品信息"
            min-width="200">
          <template slot-scope="scope">
            <div class="order">
              <div class="item">
                <span class="label">商家名称 ：</span>
                <span class="main">1545454545</span>
              </div>
              <div class="item">
                <span class="label">商品名称 ：</span>
                <span class="main">0.01</span>
              </div>
              <div class="item">
                <span class="label">商品单价 ：</span>
                <span class="main">0.01</span>
              </div>

            </div>
          </template>
        </el-table-column>
        <!--用户信息        -->
        <el-table-column
            label="用户信息"
            min-width="200">
          <template slot-scope="scope">
            <div class="order">
              <div class="item">
                <span class="label">姓名 ：</span>
                <span class="main">1545454545</span>
              </div>
              <div class="item">
                <span class="label">手机号 ：</span>
                <span class="main">0.01</span>
              </div>

            </div>
          </template>
        </el-table-column>
        <!--订单时间        -->
        <el-table-column
            label="订单时间"
            min-width="200">
          <template slot-scope="scope">
            <div class="order">
              <div class="item">
                <span class="label">下单时间 ：</span>
                <span class="main">1545454545</span>
              </div>
              <div class="item">
                <span class="label">付款时间 ：</span>
                <span class="main">0.01</span>
              </div>
              <div class="item">
                <span class="label">使用时间 ：</span>
                <span class="main">0.01</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
            label="操作"
            min-width="200">
          <template slot-scope="scope">
            <el-link type="primary">修改订单状态</el-link>
            <el-link type="primary">审核退款信息</el-link>
          </template>
        </el-table-column>
      </Table>
    </div>

  </div>
</template>

<script>
import {getUsers} from "@/http/api/user"
import {infoHead} from "./table-head";

import Table from "@/components/Table";
import OrderSearch from "@/components/group-ordr/OrderSearch";

export default {
  name: "GroupBusinessUser",
  components: {Table, OrderSearch},
  data() {
    return {
      infoHead,
      total: 0,
      tableData: [
        {
          test: "测试数据!"
        }
      ],
    };
  },
  computed: {},
  methods: {

    //初始化获取数据
    async getUsers() {
      const result = await getUsers({
        pageSize: this.$store.state.pageSize,
        pageNum: this.$store.state.pageNum
      })
      /*  this.tableData = [...result.data.list]*/
      this.total = result.data.total
    },
    //重置数据
    resetSearch() {
      console.log("重置数据")
    },
    //获取搜索数据
    getSearchVal(searchVal) {
      console.log(searchVal, "@@@@@")
    }
  },
  created() {
  },
  mounted() {
  },
};


</script>

<style lang="scss" scoped>
.table-head {
  height: 100px;
}

.head {
  display: flex;
  flex-direction: column;

  .head-top {
    height: 30px;
    line-height: 30px;
    padding: 0;
    width: 100px;
  }

  .head-bottom {
    flex: 1;
  }
}

.order {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .item {
    flex: 1;
    width: 100%;
    display: flex;

    .label {
      flex: 1;
      display: inline-block;
      text-align: right;

    }

    .main {
      flex: 1;
      text-align: left;
    }
  }

}
</style>
